<template>
	<view class="container">
		<st-navigation backgroundColor="#fff"></st-navigation>

		<view class="top-wrap">
			<view class="avatar">
				<StAvatar :designer="userData"></StAvatar>

				<image v-if="userData._userAvatar" :src="$wanlshop.ossYSM(userData._userAvatar, 80, 80, 2, 'avatar')"></image>
			</view>
			<view class="infoWrap">
				<view class="avator-info">
					<view class="name">
						{{ userData['_userName'] }}
					</view>
				</view>
				<view class="id_info">
					ID：{{ userData._userId }}
				</view>
			</view>
		</view>

		<view class="content">
			<view class="item">
				<view class="left">
					量房地址：
				</view>
				<view class="right">
					{{ userData.address }}
				</view>
			</view>
			<view class="item">
				<view class="left">
					量房时间：
				</view>
				<view class="">
					{{ userData.bookingtime || '' }}
				</view>
			</view>

			<view class="item">
				<view class="left item-wrap">
					<view class="item-wrap_left">
						面积：
					</view>
					<view class="item-wrap_left">
						{{ userData.area || '' }}
					</view>
				</view>
				<view class="right item-wrap">
					<view class="left title">
						类型：
					</view>
					<view class="">
						{{ type }}
					</view>
				</view>
			</view>

		</view>

		<view class="form-textarea">
			<textarea @blur="bindTextAreaBlur" placeholder="要求:" :disabled="true" :value="userData.content" />
		</view>
		<view class="timeWrap">
			预约时间: {{ userData.createtime }}
		</view>

		<view class="bottomWrap">
			<view class="item"  @click="contactHim">
				<view class="icon_wrap">
					<image src="/static/images/my/a2.png" mode="widthFix"></image>
				</view>
				<view class="title">
					联系TA
				</view>
			</view>
			<view class="item" @click="goContract">
				<view class="icon_wrap">
					<image src="/static/images/my/a3.png" mode="widthFix"></image>
				</view>
				<view class="title">
					合同
				</view>
			</view>
			<view class="item">
				<view class="icon_wrap">
					<image src="/static/images/my/a4.png" mode="widthFix"></image>
				</view>
				<view class="title">
					派项目经理
				</view>
			</view>
			<view class="item">
				<view class="icon_wrap">
					<image src="/static/images/my/a5.png" mode="widthFix"></image>
				</view>
				<view class="title">
					评价
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			userData: {},
			typeOptions: [],

			id: '',
		}
	},
	async onLoad(option) {
		let { id } = option;
		if (!id) {
			uni.navigateBack({
				delta: 1
			});
			return;
		}
		this.id = id;
		await this.queryConfig();
		await this.getUserData();
	},
	computed: {
		...mapState(['user']),

		type() {
			/* console.log(this.userData);
			let target = this.typeOptions.find(item => item.id == this.userData.type);
			if (target) {
				return target.name;
			} */
			return this.userData.type;
		}
	},
	methods: {
		async queryConfig() {
			await this.$api.get({
				url: '/wanlshop/config/all',
				success: res => {
					console.log(res);
					let { type } = res;
					this.typeOptions = type;
				},
				error: err => {
					console.log(err);
				}
			})
		},
		async getUserData() {
			await this.$api.get({
				url: '/wanlshop/booking/details',
				data: {
					id: this.id
				},
				success: res => {
					this.userData = res;
					this.userData.bookingtime = this.formatDateTime(this.userData.bookingtime * 1000);
					this.userData.createtime = this.formatDateTime(this.userData.createtime * 1000);
					this.userData.type = this.typeOptions.find(item => item.id == this.userData.type).name;

					this.userData['_userName'] = this.user['is_designer'] == 1 ? (this.userData['username'] || this.userData['nickname']) : (this.userData['designer_username'] || this.userData['designer_nickname']);
					this.userData['_userAvatar'] = this.user['is_designer'] == 1 ? this.userData['avatar'] : this.userData['designer_avatar'];
					this.userData['_userId'] = this.user['is_designer'] == 1 ? this.userData['user_id'] : this.userData['designer_id'];
				}
			})
		},
		goContract() {
			console.log(this.userData)
			uni.navigateTo({
				// url: `/pagesYSM/ysmMy/contract/contract?userData=${JSON.stringify(this.userData)}`
				url: `/pagesYSM/ysmMy/contract/contract?id=${this.id}`
			})
		},
		// 将时间戳转换为时间 2022.08.10
		formatDate(date) {
			let date1 = new Date(date);
			let year = date1.getFullYear();
			let month = date1.getMonth() + 1;
			let day = date1.getDate();
			return year + '.' + month + '.' + day;
		},

		// 将时间戳转为时间 2022.08.10 12:00:00
		formatDateTime(date) {
			let date1 = new Date(date);
			let year = date1.getFullYear();
			let month = date1.getMonth() + 1;
			let day = date1.getDate();
			let hour = date1.getHours();
			let minute = date1.getMinutes();
			let second = date1.getSeconds();
			return year + '.' + month + '.' + day + ' ' + hour + ':' + minute + ':' + second;
		},

		contactHim () {
			uni.navigateTo({
				url: `/pages/kefu/kefu`
			})
		}
	},
}
</script>

<style lang="less">
@import "./custom.less";
</style>
